<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>搜索产品的显示页面</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
    <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>

    <style>
        .empty {
            text-align: center;
            padding: 120px 0;
        }

        .list {
            margin-top: 50px;
        }

        #header {
            text-align: center;
            background-color: #81a9c3;
            color: #fff;
            width: 100%;
        }

        #header h1 {
            font-size: 20px;
            height: 44px;
            line-height: 44px;
            margin: 0em;
            color: #fff;
        }

          * {
            margin: 0;
            padding: 0;
          }
          li {
            list-style: none;
          }
          p {
            text-align: center;
            padding-top: 30px;
            font-size: 18px;
            color: orange;
          }
          .menu_tab {
            margin: 10px auto;
            width: 300px;
            height: auto;
            border: 1px solid #000000;
          }
          label {
            display: block;
            color: #fff;
            background: #728bbb;
            font-size: 14px;
            padding: 10px 0 10px 25px;
            border-bottom: 0.5px solid #97bdf4;
          }
          label::after {
            content: "+";
            font-size: 14px;
            float: right;
            margin-right: 15px;
          }
          label.selected::after {
            content: '-';
          }
          .tab_content {
            display: none;
            font-size: 15px;
            padding: 10px 20px;
            color: #35c628;
            text-align: center;
          }
          /*搜索框样式*/
          #box{
              width: 320px;
              /*margin:20px auto;*/
              font-family: 'Microsoft YaHei';
              font-size: 14px;
              margin-top: 10px;
          }
          input{
              width: 90%;
              border: 1px solid #81a9c3;
              height: 30px;
              float: right;
              background-image: url(image/search.jpg);
              background-repeat: no-repeat;
              background-size: 25px;
              background-position:5px center;
              border-radius: 30px;
              padding-left:10px;
          }

          /*图标*/
          .row{
            margin-top: 100px;
          }
          .row img{
            height:80px;
            margin-left: 60px;
            padding-top: 10px;

          }
          .row .row{
              padding-left: 85px;
              font-family: 'Microsoft YaHei';
              font-size: 12px;
              color:gray;
          }
        </style>


</head>

<body>
    <div id="header">
        <h1>欢迎进入资产管理系统</h1>
    </div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script>
  var   UISearchBar;
    apiready = function() {
    UISearchBar = api.require('UISearchBar'); //导入FNScanner模块

        var product = new Array();
        product = api.pageParam.product;

        //遍历传递过来的数组数据
        // for(var i=0; i < product.length; i++){

        //动态的在页面显示下拉列表
        //    $api.append( $api.byId('list'),
        //    '<li>'+
        //      '<label class="tab selected" onclick="content();">'+product[i].name+'</label>'+
        //      '<div class="tab_content">'+
        //        '<p>'+product[i].code+'</p>'+
        //        '<p>'+product[i].position+'</p>'+
        //      '</div>'+
        //    '</li>'+
        //    '</ul>');
        // }
          var length = product.length;
          //使用UIListView模块的数据赋值
        for(var i = 0; i < length; i++) {
            var item = {
                uid: product[i].id, //标识号
                imgPath: 'widget://image/'+product[i].img+'.png', //根据不同设备加载不同图片
                title: product[i].name, //标题
                subTitle: product[i].code, //条形码
                born_time:product[i].born_time,//以下为自定义变量，可以在getDataByIndex中使用
                position:product[i].position,
                type:product[i].type,
                owner:product[i].owner,
                borrowed:product[i].borrowed,
                repair:product[i].repair,
                remark: '>', //备注
                icon: ''
            }
            //注意这里不能序列化 也不能用push方法
            product[i] = item;
        }
        // alert(product[0]);
        // alert(product.length);

        //调用列表模块
        list(product);

//UIListView列表显示函数
function list(product){
    var UIListView = api.require('UIListView');
    UIListView.open({
        rect: {
            x: 0,
            y: 50,
            w: api.winWidth,
            h: api.frameHeight
        },
        data:product,  //使用自己定义的数组
        // data: [{
        //     uid: '1001',
        //     imgPath: 'widget://res/img/apicloud.png',
        //     title: product[0].name,
        //     subTitle: '子标题，说明文字',
        //     remark: '备注',
        //     icon: ''
        // }],
        rightBtns: [{
            bgColor: '#388e8e',
            activeBgColor: '',
            width: 70,
            title: '删除',
            titleSize: 12,
            titleColor: '#fff',
            icon: '',
            iconWidth: 20
        }],
        styles: {
            borderColor: '#e0e0e0',
            item: {
                bgColor: 'gray',
                activeBgColor: '#F5F5F5',
                height: 70.0,
                imgWidth: 60,
                imgHeight:60,
                imgCorner: 4,
                placeholderImg: '',
                titleSize: 17.0,
                titleColor: '#81a9c3',
                subTitleSize: 15.0,
                subTitleColor: '#a3a3a3',
                remarkColor: '#a3a3a3',
                remarkSize: 18,
                remarkIconWidth: 30
            }
        },
        fixedOn: api.frameName
    }, function(ret, err) {
        if (ret) {
              if(ret.eventType == 'clickContent')
              {
                //根据返回的data的信息 再次发送ajax请求查询数据库 麻烦
                //列表显示左滑模块
                //根据列表项的索引获取对应的数据
                UIListView.getDataByIndex({
                  //根据自定义的唯一标识（open 接口的 data 参数中自定义的唯一标识）查找列表项对应的数据
                    index: ret.index
                }, function(ret, err) {
                    if (ret) {
                      //根据点击的索引，再次查询数据库
                        api.openWin({
                            name: 'detail3',//注意这里不能同名
                            url: './top_menu.html',
                            pageParam: {
                                // name :ret.data.title,//代替传递具体的字段 而是传递全部的数据
                                // code:ret.data.subTitle,//条形码
                                // born_time:ret.data.bornTime,
                                // position:ret.data.position,
                                // type:ret.data.type
                                product:ret.data//直接传递数组

                            }
                        });
                        // alert(JSON.stringify(ret.data.title));
                    } else {
                        alert(JSON.stringify(err));
                    }
                });//getDataByIndex

              }//eventType

            // alert(JSON.stringify(ret));
        } else {
            alert(JSON.stringify(err));
        }//open-function-if-else
    });//open-function
}//list


}//apiready



</script>
</html>
